<template>
   <div class="cart">
     <div class="title">
         <p class="city">购物车</p>
         <p @click="compile" class="accomplish">{{bianji}}</p>
     </div>    
     <!-- 地址 -->
     <div class="container">
         <div v-for="(v,i) in allcheack" :key="i" v-if="validShoppingCartDealerVos!=''" >
         <div class="address">
           <div class="selected">
             <img :src="v.all?img1:img2" @click="findpitch(v.all,v.sids)" class="weixuan">
             <p>{{v.dealerName}}</p>
             <img src="../assets/img/ic-next-left.png" alt="" class="next">
           </div>
           <p class="coupon">优惠券</p>
         </div>
         <div class="shopping" v-for="(v1,i1) in v.groupGoodsVoList[0].shoppingCartGoodsResponseVo" :key="i1">
          <img :src="v1.choiceOrNo?img1:img2" class="ridiu" @click="findpitch(v1.choiceOrNo,v1.skuId)">
          <img :src="v1.picUrl">
         <div class="div">
           <span>{{v1.goodsName}}</span>
            <p class="p">
              <span class="money">￥<span>{{v1.originalPrice}}.00</span></span>
              <span class="xinxi">
                <span class="one">{{v1.secondQuantity}}</span>
                <span class="two">{{v1.secondUnit}}</span>
                <span class="three">{{v1.firstQuantity}}</span>
                <span class="four">{{v1.firstUnit}}</span>
              </span>
            </p>
            <p class="tp">
              <span class="jian" @click="jian(v1.dealerId,v1.dealerOrgId,v1.skuId,v1.totalQuantity,v1.firstUnit,v1.secondUnit,v1.thirdQuantity,v1.choiceOrNo)">-</span>
              <input class="number" v-model="v1.totalQuantity">
              <span class="jia" @click="jia(v1.dealerId,v1.dealerOrgId,v1.skuId,v1.totalQuantity,v1.firstUnit,v1.secondUnit,v1.thirdQuantity,v1.choiceOrNo)">+</span>
            </p>
        </div>
      </div>
      <div class="wei">
         <span class="zonge"></span>
         <span class="sheng">已省：-￥0.00</span>
      </div>
    </div> 
  </div>
  <div class="flex" v-show="!show">
      <span class="ridiu">
         <img :src="allcheack.all?img1:img2" @click="findpitch(allcheack.all,allcheack.sids)" class="weixuan">
         <span class="check">全选</span>
      </span>
      <p class="pa">
        <span class="size">
          合计：
          <span>
            ￥516.00
          </span>
        </span>
        <span class="sheng">已省：￥0.00</span>
      </p>
      <button @click="arr">
        去结算
      </button>
    </div>
    <div class="flex1" v-show="show">
      <span class="ridiu">
              <img 
                :src="allcheack.all?img1:img2"
                @click="findpitch(allcheack.all,allcheack.sids)"
              >
              <span class="check">全选</span>
      </span>
      <button class="shoucang" @click="findadd(arr())">移入收藏夹</button>
      <button class="delect" @click="finddel(arr())">删除</button>
    </div>
 </div>
</template>

<script>
import axios from "axios";
import { Swipe, SwipeItem } from "mint-ui";
import { shouye,cart,pitch,amend,del,add } from "../api/api.js";
export default {
   name:'shopping',
    data(){
        return{
          img1:require("../assets/img/xuanzhong.png"),  
          img2:require("../assets/img/weixuan.png"),
         validShoppingCartDealerVos:[],
         show:false,
         count:0,
         bianji:"编辑"
        }
    },
      computed: {
      // 全选
      allcheack() {
        // 把我的经销商弄成数组
        let arr = this.validShoppingCartDealerVos;
        // 循环每一个
        for (let i = 0; i < arr.length; i++) {
          // 设置个字段
          arr[i].all = false;
          // 设置个数字
          let index = 0;
          let sids = ""
          // 循环每一个经销上下面的数据
          for (let j = 0; j < arr[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo.length; j++) {
            sids += (arr[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo[j].skuId + ',')
            // 如果数据字段选中为不选结束
            if (arr[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo[j].choiceOrNo) {
              index++;
            }
            // 等我的数量跟我的数据长度一样的时候说明我所有的都是选中状态，就让经销商所有的字段为选中；
            arr[i].all = (index == arr[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo.length)
          }
          arr[i].sids = sids;
        }
        let a = 0;
        let sids = '';
        for (var i = 0; i < arr.length; i++) {
          sids += arr[i].sids;
          if (arr[i].all) {
            a++;
          }
        }
        arr.all = (a == arr.length);
        arr.sids = sids;
        return arr
      }
    },
    created(){
      this.findcart();
    },
   methods:{
    findcart(){
      return cart({
        userId:this.$store.state.userId,
        merchantId:this.$store.state.myresule.merchantId, 
        siteId:this.$store.state.myresule.stationId ,
        shopId:this.$store.state.storeId,
        provId:this.$store.state.myresule.provinceId, 
        cityId:this.$store.state.myresule.cityId ,
        countyId:this.$store.state.myresule.districtId ,
        streetId:this.$store.state.myresule.streetId ,
        storeId:this.$store.state.storeCustId,

      }).then(res=>{
        console.log("购物车",res);
        console.log(res.data);
        this.validShoppingCartDealerVos=res.data.result.validShoppingCartDealerVos;
      })
    },
    findpitch(a,b){
      return pitch({
        userId:this.$store.state.userId,
        merchantId:this.$store.state.myresule.merchantId, 
        siteId:this.$store.state.myresule.stationId ,
        shopId:this.$store.state.storeId,
        provId:this.$store.state.myresule.provinceId, 
        cityId:this.$store.state.myresule.cityId ,
        countyId:this.$store.state.myresule.districtId ,
        streetId:this.$store.state.myresule.streetId ,
        storeId:this.$store.state.storeCustId,
        isCheck:!a,
        skuIds:b,
      }).then(res=>{
        console.log("全选：",res);
         this.validShoppingCartDealerVos =res.data.result.validShoppingCartDealerVos;
      })
    },
    findamend(dealerId,dealerOrgId,skuId,firstQuantity,firstUnit,secondUnit,thirdQuantity,choiceOrNo){
      return amend({
       userId:this.$store.state.userId,
        merchantId:this.$store.state.myresule.merchantId, 
        siteId:this.$store.state.myresule.stationId ,
        shopId:this.$store.state.storeId,
        provId:this.$store.state.myresule.provinceId, 
        cityId:this.$store.state.myresule.cityId ,
        countyId:this.$store.state.myresule.districtId ,
        streetId:this.$store.state.myresule.streetId ,
        storeId:this.$store.state.storeCustId,
        "dealerId": dealerId,    
        "dealerOrgId": dealerOrgId,    
        "skuId": skuId,    
        "firstQuantity": firstQuantity,    
        "firstUnit": firstUnit,    
        "secondQuantity": 0,    
        "secondUnit": secondUnit,    
        "thirdQuantity": thirdQuantity,    
        "thirdUnit": 0,    
        "choiceOrNo": choiceOrNo,    
        "isCheck": "false",    
        "skuIds": ""
      }).then(res=>{
        console.log("修改后",res);
        this.validShoppingCartDealerVos=res.data.result.validShoppingCartDealerVos;
      })
    },
    jia(dealerId,dealerOrgId,skuId,firstQuantity,firstUnit,secondUnit,thirdQuantity,choiceOrNo){
      firstQuantity++;
      this.findamend(dealerId,dealerOrgId,skuId,firstQuantity,firstUnit,secondUnit,thirdQuantity,choiceOrNo);
    },
    jian(dealerId,dealerOrgId,skuId,firstQuantity,firstUnit,secondUnit,thirdQuantity,choiceOrNo){
      firstQuantity--;
       this.findamend(dealerId,dealerOrgId,skuId,firstQuantity,firstUnit,secondUnit,thirdQuantity,choiceOrNo);
    },
    compile(){
      if(this.bianji == "编辑"){
        this.bianji = "完成";
        this.show = true;
      }else if(this.bianji == "完成"){
        this.bianji == "编辑";
        this.show = false;
      }
    },
     finddel(b) {
        return del({
          userId: this.$store.state.userId,
          merchantId: this.$store.state.myresule.merchantId,
          siteId: this.$store.state.myresule.stationId,
          shopId: this.$store.state.storeId,
          provId: this.$store.state.myresule.provinceId,
          cityId: this.$store.state.myresule.cityId,
          countyId: this.$store.state.myresule.districtId,
          streetId: this.$store.state.myresule.streetId,
          storeId: this.$store.state.storeCustId,
          skuId:b,
        }).then(res => {
          if (res.data.status.statusCode== 0) {
            console.log("删除",res);
            this.validShoppingCartDealerVos=res.data.result.validShoppingCartDealerVos
          }
        })
      },
      arr(){
        let arr = this.validShoppingCartDealerVos;
        for(var i=0;i<arr.length;i++){
          for(var j=0;j<arr[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo.length;j++){
              console.log(arr[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo[j].skuId);
              if(arr[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo[j].choiceOrNo==true){
                return arr[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo[j].skuId
              }
          }
        }
      },
      findadd(a){
        return add({
          userId:this.$store.state.userId,
          source:1,
          skuId:a,
        }).then(res=>{
          if(res.data.status.statusCode == 0){
            console.log("收藏",res);
          }
        })
      }
  }
}
</script>

<style lang="scss" scoped>
  .cart{
     width:100%;
     background: #FFFFFF;
     display: flex;
     flex:1;
     flex-direction: column;
    .title{
        height: 0.435rem;
        width:100%;
        border-bottom:1px solid #E4E4E4;
        display: flex;
        align-items: center;
        justify-content: center;
        position:relative;
        .city{
            font-family: PingFangSC-Regular;
            font-size: 0.18rem;
            color: #030303;
            letter-spacing: -0.36px;
        }
        .accomplish{
            font-family: PingFangSC-Regular;
            font-size: 0.16rem;
            color: #666666;
            letter-spacing: -0.36px;
            line-height: 0.16rem;
            position:absolute;
            left:3.2rem;
        }
    }
    .container{
      margin-bottom:0.52rem;
      width:100%;
      flex:1;
      overflow-y:scroll;
      box-sizing: border-box;
      .address{
        width:100%;
        height:0.4rem;
        // border:1px solid red;
        display:flex;
        justify-content:space-between;
        align-items:center;
        background: #F8F8F8;
        box-sizing:border-box;
        .selected{
          display:flex;
          font-size:0.14rem;
          color:#333333;
          align-items:center;
          .weixuan{
            display:flex;
            width:0.16rem;
            height:0.16rem;
            margin:0 0.1rem 0 0.14rem;
          }
          p{
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #333333;
            letter-spacing: -0.36px;
            line-height: 0.14rem;
          }
          .next{
            width:0.12rem;
            height:0.12rem;
            margin-left:0.1rem;
          }
        }
        .coupon{
          font-family: PingFangSC-Regular;
          font-size: 0.14rem;
          color: #333333;
          letter-spacing: -0.36px;
          line-height: 0.14rem;
          padding-right:0.18rem;
        }
      }
      .shopping{
            width:100%;
            height:1.30rem;
            border-bottom:0.01rem solid #cccccc;
            display: flex;
            align-items: center;
            .ridiu{
                display: flex;
                width:0.16rem;
                height: 0.16rem;
                margin:0 0.08rem 0 0.14rem;
                 img{
                     width:0.16rem;
                     height:0.16rem;
                 }
            }
            img{
                height:1rem;
            }
            .div{
                width:100%;
                height:1.30rem;
                position: relative;
                 display: flex;
                 flex: 1;
                 flex-direction: column;
                justify-content: space-around;
                   span{
                    font-size:0.14rem;
                    color: #333333;
                    padding-left: 0.1rem;  
                }
                .p{ 
                   width:100%;
                   height:0.2rem;
                //    border: 0.01rem solid red;
                   position: relative;
                  .money{
                    font-size:0.12rem;
                    color:#DD3333;
                    line-height:0.2rem;
                    span{
                        font-size:0.18rem;
                        color:#DD3333;
                        position: absolute;
                        top:0;
                        left:0.15rem;
                    }
                  }
                  .xinxi{
                      .one{
                        font-size:0.12rem;
                        color:#DD3333;
                        position: absolute;
                        top:0.08rem;
                        right:0.55rem;
                      }
                      .two{
                        font-size:0.12rem;
                        color: #000000;
                        position: absolute;
                        top:0.08rem;
                        right:0.4rem;
                      }
                      .three{
                        font-size:0.12rem;
                        color:#DD3333;
                        position: absolute;
                        top:0.08rem;
                        right:0.22rem; 
                      }
                      .four{
                        font-size:0.12rem;
                        color: #000000;
                        position: absolute;
                        top:0.08rem;
                        right:0.1rem; 
                      }
                  }
                }
                .tp{
                    display: flex;
                    margin-left: 0.8rem;
                    .jian{
                        display: block;
                        line-height:0.26rem;
                        text-align:center;
                        width:0.26rem;
                        height:0.26rem;
                        background: #F2F1F6;
                        border: 0.01rem solid #999999;
                        border-radius: 0.02rem 0 0 0.02rem;
                    }
                    .number{
                        width:0.54rem;
                        height:0.24rem;
                        display: block;
                        background: #FFFFFF;
                        border: 0.01rem solid #999999;
                        line-height: 0.26rem;
                        text-align: center;
                    }
                    .jia{
                        display: block;
                        line-height: 0.26rem;
                        text-align: center;
                        width:0.26rem;
                        height:0.26rem;
                        background: #F2F1F6;
                        border: 0.01rem solid #999999;
                        border-radius: 0.02rem 0 0 0.02rem;
                    }
                }            
            }               
        }
        .wei{
            width:100%;
            height:0.5rem;
            // border: 0.01rem solid red;
            display: flex;
            flex-direction: column;
            position: relative;
            .zonge{
                position: absolute;
                right:0.05rem;
                top:0.1rem;
                font-size:0.16rem;
                color: #333333;
            }
            .sheng{
                position: absolute;
                right:0.05rem;
                top:0.25rem;
                font-size:0.12rem;
                color: #DD3333;
            }
        }
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items:center;
        position: fixed;
        bottom:0.49rem;
        width:100%;
        height:0.55rem;
        border:1px solid #ccc;
        background-color: #FFFFFF;
        z-index:99;
        // border: 0.01rem solid red;
        .ridiu{
            display: flex;
            align-items:center;
             .weixuan{
               width:0.16rem;
               height: 0.16rem;
               margin:0 0.1rem 0 0.14rem;
             }
             .check{
               font-family: PingFangSC-Regular;
                color: #666666;
                letter-spacing: 0;
                //  position: absolute;
                //  top:0.21rem;
                //  left:0.4rem;
                font-size: 0.14rem;
                // color:#999999;
                margin-right:0.05rem;
            }
        }
        .pa{
            width:1.25rem;
            height:0.55rem;
            // border:0.01rem solid red;
            display: flex;
            justify-content: center;
            flex-direction: column;
            .size{
                display: flex;
                font-size:0.16rem;
                color:#000000;
                margin-left: 0.1rem;
                margin-bottom: 0.05rem;
                span{
                    display:inline-block;
                    color:#DD3333;
                }
            }
            .sheng{
                color:#999999;
                margin-left: 0.1rem;
            }
        }
        button{
            width:40%;
            height: 0.55rem;
            background-color: #DD3333;
            border:0.01rem solid #DD3333;
            color: white;
        }
     }
    }

    
    
  
</style>



